<template>
	<view class="page-block movie">
		    <video  class="video"  :src=" movieData.trailer" :poster="movieData.poster" controls='true' object-fit='cover'></video>
			<view class="movie-detail">
				<navigator :url ="'../cover/cover?cover='+movieData.cover">
				 <view class="movie-detail-img">
				 	<image class="img" :src="movieData.cover" mode=""></image>
				 </view>
				</navigator>
				 <view class="movie-info-wrap">
				 	 <h2 class="movie-title">{{movieData.name}}</h2>
					 <view class="movie-desc">
					 <view class="movie-addre">
					 	{{movieData.basicInfo}}
					 </view>
					 <view class="movie-name">
					 	{{movieData.originalName}}
					 </view>
					 <view class="movie-time">
					 		{{movieData.totalTime}}
					 </view>
					 <view class="movie-date">
						 	{{movieData.releaseDate}}
					 </view>
					 </view>
					 <view class="movie-rote">
					 	<view class="rote-left">
					 		<view class="left-top">
					 			综合评分
					 		</view>
							<view class="left-buttom">
								{{movieData.score}}
							</view>
					 	</view>
						<view class="rote-right">
							<start class="start" :rote="movieData.score"></start>
							<view class="">{{movieData.prisedCounts}}人点赞</view>
							
						</view>
					 </view>
				 </view>
			</view>
			<view class="plotDesc">
				<view class="plotDesc-title">
					剧情介绍
				</view>
				<view class="plotDesc-text">
					{{movieData.plotDesc}}
				</view>
			</view>
			
			<view class="plotPics">
				<view class="plotPics-title">
					演职人员
				</view>
			
				  <scroll-view  scroll-x="true"  class="plotPics-scroll">
				   	<view v-for="(item,index) in  directors" class="plotPics-item" @click ="stafflook" :data-staffIndex="index">
						<image :src="item.photo" class="plotPics-img" mode="aspectFill"></image>
						<view class="name">{{item.name}}</view>
						<view class="actname">{{item.actName}}</view>
						
					</view>
					
					<view v-for="(item,index) in  performer" class="plotPics-item" :class="{lastItem:index==performer.length-1}"  @click ="stafflook" :data-staffIndex="index+directors.length">
						<image :src="item.photo" class="plotPics-img" mode="aspectFill"></image>
						<view class="name">{{item.name}}</view>
						<view class="actname">{{item.actName}}</view>
						
					</view>
					
				   </scroll-view>
			</view>
			
			<view class="plotPics">
				<view class="plotPics-title">
					剧照
				</view>
			
				  <scroll-view  scroll-x="true"  class="plotPics-scroll"  >
				   	<view v-for="(item,index) in  plotPicsArr" 
					      class="plotPics-item"
						  :class="{lastItem:index==plotPicsArr.length-1}"
						   @click="melook"
						  :data-imgIndex = "index"
						  >
						<image :src="item" class="plotPics-img" mode="aspectFill"></image>
					</view>
				   </scroll-view>
			</view>
	</view>
	
</template>

<script>
	import Start from '../../components/Start.vue'
	export default {
		name:'Movie',
		data(){
		   return {
			   movieData:{},
			   plotPicsArr:[],
			   directors:[],
			   performer:[]
			
			  
		   }
		},
		onLoad(params){
		
		 let id = params.trailerId;
		    this.getMovieDetail(id);
			
			 uni.setNavigationBarColor({
			 	frontColor:"#ffffff",
				backgroundColor:"#000000"
			 })
		
			
		},
		methods:{
			getMovieDetail(id){
				uni.request({
					method:'POST',
					url:this.serverUrl+'/search/trailer/'+id+'?qq=3316368400',
					success:(res) => {
						let data = res.data;
						   if(data.status!=200) return;
						     this.movieData = data.data;
							   console.log("aaa:",this.movieData);
							  this.plotPicsArr = JSON.parse( this.movieData.plotPics);
							  
							
					}
				})
				uni.request({
					method:'POST',
					url:this.serverUrl+'/search/staff/'+id+'/1'+'?qq=3316368400',
					success:(res) =>{
					  let data = res.data;
					     if(data.status!=200) return;
						 this.directors=data.data;
						 console.log(this.directors);
						 
					}
				})
				uni.request({
					method:'POST',
					url:this.serverUrl+'/search/staff/'+id+'/2'+'?qq=3316368400',
					success:(res) =>{
					  let data = res.data;
					     if(data.status!=200) return;
						 this.performer=data.data;
						 console.log(this.performer);
						 
					}
				})
			},
			stafflook(e){
				var staffIndex = e.currentTarget.dataset.staffindex,
					newArr = this.directors.concat(this.performer),
					urls = newArr.map((item,index,arr) => {
					   return item.photo;
					});
				
				 uni.previewImage({
				 	   current: urls[staffIndex],
				 	   urls: urls
				 })		
			},
			melook(e){
			
				var imgIndex = e.currentTarget.dataset.imgindex;
			
			   uni.previewImage({
				   current: this.plotPicsArr[imgIndex],
			   	   urls: this.plotPicsArr
			   })
			}
		
	
			
		},
	components: {
		Start
	}
	}
</script>

<style>
	
	@import url("movie.css");
	
	
</style>